<template>
    <div id="levelBar"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
export default {
  name: 'levelBar',
  props: {
    isCity: {
      type: Boolean,
      required: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      myChart: null,
      barWidth: 6
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeFn, true);
    this.myChart?.dispose();
  },
  watch: {
    chartData: {
      handler: function(val) {
        this.$nextTick(() => {
          this.initChart(val);
        })
      },
      immediate: true
    }
  },
  methods: {
    initChart(val) {
      const _this = this
      let chartDom = document.getElementById('levelBar');
      if (!chartDom) {return}
      this.myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: '告警总览',// 设置主标题
          left: 'left'
        },
        tooltip: {
          show: true
        },
        dataZoom: [
          {
            type: 'slider', // 横向滚动条
            show: true,
            height: 15,
            xAxisIndex: [0], // 控制第一个X轴
            startValue: 0, // 数据窗口范围的起始百分比
            endValue: 10 // 数据窗口范围的结束百分比，这里只是示例，实际应根据需要设置
            // 其他样式和行为配置...
          }
        ],
        toolbox: {
          show: true,
          right: 40,
          feature: {
            mySwitchBtn: {
              show: true,
              title: _this.isCity ? '切换为站点' : '切换为城市',
              // eslint-disable-next-line vue/no-mutating-props,max-len
              icon: 'path://M714.88462127 579.78733204c0.40576907 0 0.64445703 0.04773737 0.85927606 0.0954753l-0.85927605-0.0954753a3.58031685 3.58031685 0 0 1 3.05520355 1.71855209l-0.52511333-0.66832544a3.58031685 3.58031685 0 0 1 0.95475134 3.38936625l0.09547529-0.85927605a3.58031685 3.58031685 0 0 1-0.38190065 1.59920837l-0.0954753 0.19095006a3.58031685 3.58031685 0 0 1-0.42963801 0.57285068l-0.14321267 0.16708164-119.58258257 119.82127052a3.58031685 3.58031685 0 0 1-5.72850695-4.12929911l0.668326-0.93088238 113.47217495-113.71086295H309.11537873a3.58031685 3.58031685 0 0 1-1.12183244-6.96968307l1.12183243-0.19095061h405.76924255zM431.22805202 318.28098984a3.58031685 3.58031685 0 0 1 0.668326 4.12929911l-0.668326 0.93088238L317.70813914 437.05203428H714.88462127a3.58031685 3.58031685 0 0 1 1.12183244 6.96968307l-1.12183243 0.19095061H308.80508495a3.58031685 3.58031685 0 0 1-0.52511332-0.09547529l0.8354071 0.09547529a3.58031685 3.58031685 0 0 1-3.05520355-1.71855209l0.52511333 0.66832544a3.58031685 3.58031685 0 0 1-0.95475135-3.4132352l-0.09547529 0.883145a3.58031685 3.58031685 0 0 1 0.38190065-1.59920837l0.0954753-0.19095006a3.58031685 3.58031685 0 0 1 0.42963802-0.57285069l0.14321267-0.16708163 119.58258256-119.82127052a3.58031685 3.58031685 0 0 1 5.06018096 0z',
              onclick: function() {
                // 按钮点击时的回调函数
                _this.$emit('switch', !_this.isCity)
              },
              iconStyle: {
                borderColor: _this.isCity ? '#919191' : '#71b3d5',
                // 其他样式设置...
              }
            },
            dataView: {
              readOnly: false
            },
            magicType: {type: ['line', 'bar']}
          }
        },
        legend: {
          data: ['一级', '二级', '三级'],
          top: 5,
          // width: 300,
          // right: 80 // 控制图例
          // right: 'right'// 控制图例
          // left,right可以控制图例距离容器方位
          // textStyle可以控制图例文字样式
        },
        xAxis: {
          type: 'category',
          data: val.map(item => item.alarmLocal)
        },
        yAxis: {
          type: 'value',
          max: function(value) {
            return Math.ceil(value.max * 1.2); // 最大值的1.2倍
          },
          minInterval: 1
        },
        series: [{
          name: '一级', // 对应图例数据
          type: 'bar', // 类型为"bar"柱状图
          color: '#f56c6c',
          barWidth: this.barWidth, // 柱状宽度
          barGap: 10, // 不同系列的柱间距离
          data: val.map(item => item?.oneLevel)
        }, {
          name: '二级', // 对应图例数据
          type: 'bar', // 类型为"bar"柱状图
          color: '#e6a23c',
          barWidth: this.barWidth, // 柱状宽度
          barGap: '40%', // 不同系列的柱间距离
          data: val.map(item => item.twoLevel)
        }, {
          name: '三级', // 对应图例数据
          type: 'bar', // 类型为"bar"柱状图
          color: '#909399',
          barWidth: this.barWidth, // 柱状宽度
          barGap: '40%', // 不同系列的柱间距离
          data: val.map(item => item.thirdLevel)
        }
        ]
      };
      this.myChart.setOption(option);

      option && this.myChart.setOption(option);

      window.addEventListener('resize', this.resizeFn, true);
    },
    resizeFn() {
      this.myChart.resize();
    }
  }
}
</script>

<style lang="scss" scoped>
    #levelBar {
        width: 100%;
        height: 100%;
    }
</style>
